<template>
  <div>
    <!--
      这里title属性不加冒号？
      不加冒号：只需要传递一个字符串类型的数据
      加冒号： 1.识别data选项中的数据  2.识别具体的类型
     -->
    <van-nav-bar title="黑马头条-登录" />
    <!--
      表单区域
      1. v-model双向绑定通过一个对象做绑定 提交好做
      2. field组件的name属性决定将来校验通过时产出的数据对象的key 英文
      3. field组件的rules配置校验规则 数组 -> 规则对象
      4. form组件的submit事件 当所有校验的表单项都通过时才会触发 参数就是表单数据对象

      先以一个最小化的demo跑通  -> 根据业务做定制修改

      1. 双向绑定的字段名 接口文档
      2. 规则按照业务需求 加规则
     -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="loginForm.mobile"
          name="mobile"
          label="用户名"
          placeholder="用户名"
          required
          :rules="[
            {
              required: true,
              message: '请填写手机号',
              trigger: 'onChange',
              pattern: /^1[3456789]\d{9}$/,
            },
          ]"
        />
        <van-field
          v-model="loginForm.code"
          type="password"
          name="code"
          label="密码"
          placeholder="密码"
          required
          :rules="[
            {
              required: true,
              message: '请填写密码',
              trigger: 'onChange',
              pattern: /^\d{6}$/,
            },
          ]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'login-index',
  data () {
    return {
      loginForm: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    async onSubmit (value) {
      // 1. 简化业务组件中对于数据的访问  res.data.data -> res.data
      // 2. 接口发生错误的时候 在当前位置拿到错误的信息  trycatch
      await this.$store.dispatch('fetchLogin', value)
      // 登录成功提示 等待登录成功返回数据之后才可以提示
      Toast.success('登录成功')
      // 跳转到layout首页
      this.$router.push('/')
    }
  }
}
</script>
